<template>
  <div class="page">
    <!-- <div class="page-search"></div> -->
    <div class="page-body">
      <div class="toolbar">
        <div class="toolbar__left">
          <el-button type="info" @click="refresh">刷新</el-button>
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <el-button
            type="danger"
            :disabled="checkedIds.length <= 0"
            @click="handleDelete(checkedIds)"
          >
            删除
          </el-button>
        </div>
        <div class="toolbar__right"></div>
      </div>
      <div class="table">
        <el-table
          v-loading="loading"
          border
          :data="tableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="label" />
          <el-table-column label="备注" prop="remark" />
          <el-table-column label="创建时间" prop="createTime">
            <template #default="{ row }">
              <p>{{ dateFormat(row.createTime) }}</p>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" prop="updateTime">
            <template #default="{ row }">
              <p>{{ dateFormat(row.updateTime) }}</p>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="default" size="small" @click="handleEdit(row)">
                编辑
              </el-button>
              <el-popconfirm
                title="你确认要删除吗？"
                @confirm="handleDelete(row.id)"
              >
                <template #reference>
                  <el-button type="danger" size="small"> 删除 </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog v-model="dialog.visible" :title="dialog.title" destroy-on-close>
      <UpsertForm
        ref="upsertForm"
        @cancel="handleCancel"
        @success="handleSuccess"
      />
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList, delRole } from "@/api/role";
import UpsertForm from "./components/upsert-form.vue";
import { ElMessage } from "element-plus";
import dateMixin from "@/mixins/date-mixin";

export default {
  mixins: [dateMixin],

  components: {
    UpsertForm,
  },

  data() {
    return {
      // 数据请求中
      loading: false,
      // 表格数据
      tableData: [],
      // 当前勾选的数据Id集合
      checkedIds: [],
      // dislog 相关状态数据
      dialog: {
        visible: false,
        title: "新增",
      },
    };
  },

  methods: {
    /**
     * 获取数据
     */
    refresh() {
      this.loading = true;
      getRoleList()
        .then((data) => {
          this.tableData = data;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /**
     * 处理勾选
     */
    handleSelectionChange(rows) {
      this.checkedIds = rows.map((item) => item.id);
    },

    /**
     * 新增处理
     */
    handleAdd() {
      this.dialog.title = "新增";
      this.dialog.visible = true;
    },

    /**
     * 编辑处理
     */
    handleEdit(row) {
      console.log("row", row);

      this.dialog.title = "编辑";
      this.dialog.visible = true;

      // 需要等待组件创建并挂载完成，才能获取到组件的实例
      this.$nextTick(() => {
        // setModel
        this.$refs.upsertForm.setModel({
          id: row.id,
          name: row.name,
          label: row.label,
          remark: row.remark,
          menuIdList: row.menuIdList,
        });
      });
    },

    /**
     * 删除处理
     */
    handleDelete(id) {
      // id 可能是 数字，也可能是一个 数组
      delRole({
        ids: Array.isArray(id) ? id : [id],
      }).then(() => {
        ElMessage.success("删除成功");
        this.refresh();
      });
    },

    /**
     * 处理新增或编辑的取消
     */
    handleCancel() {
      this.dialog.visible = false;
    },

    /**
     * 处理新增或编辑成功
     */
    handleSuccess() {
      ElMessage.success("成功");
      // 刷新数据
      this.refresh();
      // 关闭弹窗
      this.dialog.visible = false;
    },
  },

  created() {
    this.refresh();
  },
};
</script>

<style lang="scss" scoped>
.page-search {
  height: 100px;
  border: 1px solid #000;
}

.page-body {
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  background-color: powderblue;
  &__left {
    flex: 1;
  }
  &__right {
    width: 100px;
    height: 36px;
    background-color: green;
  }
}
</style>
